<template>
  <div class="content1">
    <!--导航栏开始-->
    <nav-tab :navIndex="type"></nav-tab>
    <div class="hengfu">
      <img src="../assets/5-9.jpg" />
    </div>
    <div class="con">
      <p class="text">当前位置：<router-link to="/">首页</router-link>>><span class="hand" @click="goclass">{{type==6?'客户见证':'新闻动态'}}</span>>{{navlist[navIndex]}}</p>
      <div class="details">
        <div class="detail_left">
          <p class="detail_title">{{newsContent.title||'无'}}</p>
          <div class="detail_tips">
            <p>来源：{{newsContent.title_vice}}</p>
            <p>浏览：{{newsContent.number}}</p>
            <p>发布日期：{{newsContent.time}}</p>
          </div>
          <div class="detail_content" v-html="newsContent.content||'无'"></div>
          <div style="margin-bottom:0.1rem">
            <!-- <img v-for="item in newsContent.img" :src="item" :key="item" style="width:100%"> -->
          </div>
          <div class="detail_page">
            <p v-if="newsPage.before" @click="changeDetail(newsPage.before.id)">上一章：<span class="blue">{{newsPage.before.title||'无'}}</span></p>
            <p v-if="newsPage.last" @click="changeDetail(newsPage.last.id)">下一章：<span class="blue">{{newsPage.last.title||'无'}}</span></p>
          </div>
        </div>
        <div class="detail_right">
          <p>最新动态</p>
          <ul>
            <li v-for="(item,index) in newList" :key="index" @click="changeDetail(item.id)">
              <span class="detail_right_icon" :class="{icon1:index<3}">›</span>
              <p class="detail_right_tit">{{item.title}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 页脚开始 -->
    <Footer></Footer>
  </div>
</template>

<script>
import NavTab from "../components/navtab";
import Footer from "../components/footer";
export default {
  components: {
    NavTab,
    Footer,
  },
  data() {
    return {
      navlist: [
        "新闻资讯",
        "大卖场动态",
        "大卖场百科",
        "客户见证",
        "建筑总包方",
        "消防工程安装公司",
        "地产建设公司",
        "政府公益项目业主方",
        "行业各大门市商铺",
        "个人施工队",
      ],
      navIndex: 0,
      page: {
        size: 5,
        cont: 1,
        total: 10,
      },
      newsid: '',
      newsContent: {},
      newsPage: {},
      newList: [],
      type: 0
    };
  },
  created() {},
  mounted() {
    //跳转到顶部
    window.scrollTo(0, 0)
    if (this.$route.query.id) this.newsid = this.$route.query.id
    this.getNewsDetail()
    this.getNewsDetailRead()
    this.type = +this.$route.query.num
  },
  methods: {
    goclass() {
      this.$router.go(-1)
      // if(this.type == 6){
      //   this.$router.push({
      //     path: '/page/witness'
      //   })
      // }
      // if(this.type == 7){
      //   this.$router.push({
      //     path: '/page/news'
      //   })
      // }
    },
    selectNav(i) {
      this.navIndex = i;
    },
    getNewsDetail() { // 新闻详情
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/article/index_info?id=" + this.newsid)
        .then((res) => {
          console.log("新闻详情", res.data.result);
          this.newsContent = res.data.result.list
          this.newsPage = res.data.result.page
          this.newList = res.data.result.new
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getNewsDetailRead() { // 新闻资讯阅读量
      var _this = this;
      _this.$ajax
        .post("http://api.wld119.com/api/v1/article/read", {id: this.newsid})
        .then((res) => {
          console.log("新闻资讯阅读量", res.data.result);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    changeDetail(id) {
      this.newsid = id
      this.getNewsDetail()
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 头部开始*/
/* .content{} */
.con {
  width: 1200px;
  margin: 0 auto;
}
.text {
  margin-bottom: 10px;
}
.hengfu img {
  width: 100%;
}

.newsbox_top {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 30px;
}
.nav {
  width: 280px;
  text-align: center;
  color: #333;
}
.nav_top,
.nav_btm {
  border: 1px solid #c2c2c2;
}
.nav_btm {
  padding: 40px;
  text-align: left;
}
.nav_btm p {
  line-height: 30px;
  color: #333;
  font-size: 16px;
}
.nav_btm p:first-child {
  text-align: center;
  font-weight: bold;
}
.nav_top {
  margin-bottom: 20px;
  line-height: 60px;
}
.nav_top p {
  height: 85px;
  background: #0061ae;
  color: #fff;
  line-height: 85px;
  font-size: 30px;
}
.nav_top li {
  font-size: 16px;
  height: 60px;
  box-sizing: border-box;
  border-top: 1px solid #c2c2c2;
}

.new_list {
  width: 885px;
}
.new_list li {
  height: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #f5f5f5;
  margin-bottom: 10px;
  /* justify-content: space-between; */
}
.new_left {
  width: 470px;
  padding: 0 26px;
  box-sizing: border-box;
}
.new_content {
  margin: 15px 0;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break: break-all;
  font-size: 13px;
}
.new_list img {
  width: 410px;
  /* height: 180px; */
}
.new_title {
  color: #0061ae;
  font-weight: bold;
  font-size: 15px;
}
.new_btn > span {
  display: inline-block;
  width: 90px;
  height: 27px;
  border: 1px solid #535353;
  line-height: 27px;
  text-align: center;
  margin: 0 40px;
}
.other_left{
  width: 680px;
  height: 150px;
  padding-left: 50px;
  justify-content: space-between;
}
.other_right{
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-self: ; */
}
.other_right span:nth-child(1){
  font-size: 48px;
}
.other_right span:nth-child(2){
  margin-bottom: 15px;
}
.detailbtn{
  width: 80px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: #0061ae;
  color: #fff;
  font-size: 13px;
}

.active {
  font-weight: bold;
  color: #000;
}
.newsbox_btm {
  width: 35%;
  margin: 0 auto;
}


/* 详情 */
.details{
  display: flex;
  justify-content: space-between;
}
.detail_left{
  width: 825px;
}
.detail_title{
  font-size: 22px;
  text-align: center;
  margin: 25px 0;
}
.detail_tips{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-bottom: 1px dashed #c0c0be;
  padding-bottom: 25px;
}
.detail_content{
  margin: 25px 0;
  width: 100%;
}
.detail_page{
  /* font-size: 15px; */
}
.detail_page p{
  margin-bottom: 10px;
  cursor:pointer;
}
.blue{
  color: #0060b8;
}
.detail_right{
  width: 330px;
  text-align: center;
  margin-top: 25px;
}
.detail_right>p{
  font-size: 24px;
  color: #006fd1;
  border-bottom: 2px solid #bfbfbd;
  padding-bottom: 18px;
}
.detail_right li{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  cursor:pointer;
}
.detail_right_icon{
  background: #bebebe;
  color: #fff;
  font-size: 40px;
  width: 20px;
  height: 20px;
  line-height: 12px;
  margin-right: 10px;
}
.icon1{
  background: #0073c3;
}
.detail_right_tit{
  color: #393939;
  width: 250px;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

</style>
<style>
.detail_content img{
  width: 100%!important;
  height: auto!important;
}
</style>